<script setup>
import {onMounted, ref} from "vue";

const props = defineProps({
  timeItem: {
    type: String,
  },
  isDay: {
    type: Boolean,
    default: false,
  },
  isHour: {
    type: Boolean,
    default: false
  },
  isMinute: {
    type: Boolean,
    default: false
  },
  isSecond: {
    type: Boolean,
    default: false
  },
  timeStyle: {
    type: Object,
    default: {}
  }
})
// 订单详情变量
const orderDetail = ref()
// 倒计时数据变量
const timestamp = ref()
onMounted(() => {
  orderDetail.value = props.timeItem
  console.log('订单详情===', props.timeItem)
  daojishi(props.timeItem)
})


const countDown = (seconds) => {
  let [day, hour, minute, second] = [0, 0, 0, 0]
  if (seconds > 0) {
    day = Math.floor(seconds / (60 * 60 * 24))
    hour = Math.floor(seconds / (60 * 60)) - (day * 24)
    minute = Math.floor(seconds / 60) - (day * 24 * 60) - (hour * 60)
    second = Math.floor(seconds) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60)
  }
  if (day < 10) {
    day = + day
  }
  if (hour < 10) {
    hour = 0 + hour
  }
  if (minute < 10) {
    minute = 0 + minute
  }
  if (second < 10) {
    second = 0 + second
  }
  return {
    d: day,
    h: hour,
    i: minute,
    s: second
  };
}

const daojishi = (item) => {
  let nowTime = +new Date()
  let putTime = +new Date(item.replace(/-/g, "/"))
  let date = (putTime - nowTime)/1000
  timestamp.value = countDown(date)

  console.log('倒计时=', timestamp.value)
}
</script>
<!--例子-->
<!--<lszbg-uni-count-down
    :timeItem="shop.end_time"
    :is-day="false"
    :is-hour="true"
    :is-minute="true"
    :timeStyle="{fontSize: 14,color: '#ffffff', background: '#FF7900'}">
</lszbg-uni-count-down>-->
<template>
  <uni-countdown
      :day="timestamp?.d"
      :hour="timestamp?.h"
      :minute="timestamp?.i"
      :second="timestamp?.s"
      :showDay="isDay"
      :showHour="isHour"
      :showMinute="isMinute"
      :showSecond="isSecond"
      :font-size="props.timeStyle?.fontSize"
      :color="props.timeStyle?.color"
      :background-color="props.timeStyle?.background"
      :splitorColor="props.timeStyle?.splitorColor"
      style="--colon-color: '#FF7900'"
  />
</template>

<style scoped lang="scss">

</style>